<template>
    <div id="slideInformation" class="box-content" v-show="this.$store.state.isSlideInfo">
          <ul class="link-list">
      <!-- <router-link to="/inpatients" tag="li"  @click.native="isSlide"></router-link> -->
      <router-link v-for="(item,index) in list" 
     :key="item.value" :to="{path:item.path,query:{item:index}}"
     :class="{'router-link-active':ind == index}"
      @click.native="changeBgc(index)" tag="li"> 
      {{item.label}} 
    </router-link>
      </ul>
    </div>
</template>
<script>
export default {
      data : function(){
      return{
        list: [
          {path:'/inpatients',label:''},
          {path:'/basicInformation',label:'基本信息'},
          {path:'/medicalAdvice',label:'医嘱'},
          {path:'/medicalHistory',label:'病历'},
          {path:'/reportpage',label:'报告'},
          {path:'/physicalSignPage',label:'体征'},
          {path:'/operationPage',label:'手术'},
          {path: '/scorePage', label: '评分' },
          {path: '/nursingListPage', label: '特护单' },
          {path: '/handOver', label: 'ICU病志' },
          {path: '/eventsAnalysis', label: '事件分析' },
          {path:'/changepassword',label:''}
      ],
      ind: '0',
      }
     
    },
    methods : {
       changeBgc(index){
      this.ind = index;
         if (index == 0) {
           this.$store.dispatch('slide');
           this.$store.state.flags = false;
           this.$router.push({
             name: "inpatients",
             query: { item: 0, department: 1 }
           });
           //console.log(this.$store.state.isSlide)
         } else if (index == 4) {
           this.$router.push({
             path: '/reportpage/inspectionReportListPage',
             query: { in: 0, item: 4 }
           })
         }
         else if (index == 5) {
           this.$router.push({
             path: '/physicalSignPage/signsVs/signsVsSubSurface',
             query: { in: 0, item: 5 }
           })
         } else if (index == 7) {
           this.$router.push({
             path: '/scorePage/scoreListPage',
             query: { item: 7 ,ind: 0}
           })
         }
    }
         },
    mounted(){
      if (this.$route.query.item) {
        this.ind = this.$route.query.item;
      }  else {
        this.ind = 0;
      }
      
  }
    }

</script>
<style scoped>
#slideInformation .link-list li {
  line-height: 5.5vh;
  height:5.5vh;
  cursor: pointer;
  text-align:center;
}
  #slideInformation .link-list li:first-child:before {
    display: inline-block;
    content: '';
    width: 0.25rem;
    height: 0.25rem;
    max-height:35px;
    max-width:35px;
    min-width: 15px;
    min-height: 15px;
    background-image: url('../../../../static/images/home.png');
    background-size: cover;
    /* margin-top: 11px; */
  }
#slideInformation .link-list li:last-child:before{
       display:inline-block;
       content:'';
       width:30px;
       height:30px;
       background-image:url('../../../../static/images/changePassword.png');
       margin-top:20px;
}
#slideInformation .link-list li:last-child{
   position:absolute;
   bottom:30px;
   cursor:pointer;
   max-width:254px;
}
 #slideInformation .link-list li:last-child.router-link-active:before{
      background-image:url('../../../../static/images/changePassword_1.png');
}
#slideInformation .link-list li.router-link-active {
  background-color: #11a7f3;
}
#slideInformation .link-list li:first-child.router-link-active,#slideInformation .link-list 
 li:last-child.router-link-active{
  background-color: #f7f7f7;
 }
 /**#slideInformation .link-list li:first-child.router-link-exact-active:before{
   background-image:url('../../../../static/images/home-1.png');
 }**/
#slideInformation .link-list li{
  display:block;
  color:#666;
}
#slideInformation .link-list li.router-link-active{
  color:#FFF;
}
</style>
